<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>"千里眼"企业舆情分析系统 - 智能监控平台</title>
    
    <!-- Fluent Design Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluentui/font-icons-mdl2@8.2.1/dist/css/fabric-icons-inline.css">
    
    <!-- 图表库 -->
    <script src="js/echarts.min.js"></script>
    
    <style>
        /* Microsoft Fluent Design System */
        :root {
            --primary-color: #0078d4;
            --primary-hover: #106ebe;
            --primary-pressed: #005a9e;
            --accent-color: #0099bc;
            --success-color: #16a085;
            --warning-color: #ca5010;
            --error-color: #d13438;
            --info-color: #0078d4;
            --warning-bg: rgba(255, 185, 0, 0.1);
            
            --neutral-0: #ffffff;
            --neutral-10: #faf9f8;
            --neutral-20: #f3f2f1;
            --neutral-30: #edebe9;
            --neutral-40: #e1dfdd;
            --neutral-50: #d2d0ce;
            --neutral-60: #c8c6c4;
            --neutral-70: #b3b0ad;
            --neutral-80: #a19f9d;
            --neutral-90: #8a8886;
            --neutral-100: #605e5c;
            --neutral-110: #484644;
            --neutral-120: #323130;
            --neutral-130: #201f1e;
            --neutral-140: #161514;
            --neutral-150: #0b0a09;
            
            --shadow-2: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.10);
            --shadow-4: 0 0 4px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.12);
            --shadow-8: 0 0 8px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.12);
            --shadow-16: 0 0 16px rgba(0, 0, 0, 0.16), 0 16px 32px rgba(0, 0, 0, 0.12);
            --shadow-64: 0 0 32px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.16);
            
            --border-radius-2: 0px;
            --border-radius-4: 0px;
            --border-radius-6: 1px;
            --border-radius-8: 1px;
            
            --font-family: 'Segoe UI', 'San Francisco', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        }

        /* 微软风格加载指示器 */
        .ms-loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--neutral-60);
            border-top: 2px solid var(--primary-color);
            border-radius: 0px;
            animation: msSpinSquare 0.8s linear infinite;
        }

        @keyframes msSpinSquare {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 微软风格脉冲动画 */
        .ms-pulse {
            animation: msPulse 1.5s ease-in-out infinite;
        }

        @keyframes msPulse {
            0%, 100% { 
                transform: scale(1);
                opacity: 1;
            }
            50% { 
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        /* 微软风格滑动进入动画 */
        .ms-slide-in {
            animation: msSlideIn 0.3s ease-out;
        }

        @keyframes msSlideIn {
            from { 
                transform: translateX(-20px);
                opacity: 0;
            }
            to { 
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-family);
            background: var(--neutral-10);
            color: var(--neutral-130);
            font-size: 14px;
            line-height: 1.5;
        }
        
        /* 主容器 */
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部导航栏 */
        .app-header {
            background: var(--neutral-0);
            border-bottom: 1px solid var(--neutral-40);
            padding: 0 24px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow-2);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .app-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--neutral-130);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .app-title i {
            color: var(--primary-color);
            font-size: 24px;
        }
        
        /* 导航菜单 */
        .nav-menu {
            display: flex;
            gap: 4px;
        }
        
        .nav-item {
            padding: 8px 16px;
            border-radius: var(--border-radius-4);
            background: transparent;
            border: none;
            color: var(--neutral-100);
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            position: relative;
        }
        
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: all 0.15s ease;
            transform: translateX(-50%);
        }
        
        .nav-item:hover {
            background: var(--neutral-20);
            color: var(--neutral-130);
        }
        
        .nav-item:hover::after {
            width: 80%;
        }
        
        .nav-item.active {
            background: var(--primary-color);
            color: var(--neutral-0);
        }
        
        .nav-item.active::after {
            width: 100%;
            background: var(--neutral-0);
        }
        
        .nav-item.active:hover {
            background: var(--primary-hover);
        }
        
        /* 主内容区 */
        .app-main {
            flex: 1;
            display: flex;
        }
        
        /* 侧边栏 */
        .app-sidebar {
            width: 280px;
            background: var(--neutral-0);
            border-right: 1px solid var(--neutral-40);
            padding: 24px;
            box-shadow: var(--shadow-2);
        }
        
        .sidebar-section {
            margin-bottom: 32px;
        }
        
        .sidebar-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu li {
            margin-bottom: 4px;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: var(--border-radius-6);
            text-decoration: none;
            color: var(--neutral-100);
            transition: all 0.15s ease;
            border: 1px solid transparent;
            position: relative;
        }
        
        .sidebar-menu a::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 0;
            height: 20px;
            background: var(--primary-color);
            transition: width 0.15s ease;
            transform: translateY(-50%);
        }
        
        .sidebar-menu a:hover {
            background: var(--neutral-20);
            color: var(--neutral-130);
            padding-left: 20px;
        }
        
        .sidebar-menu a:hover::before {
            width: 3px;
        }
        
        .sidebar-menu a.active {
            background: var(--primary-color);
            color: var(--neutral-0);
            border-color: var(--primary-color);
            padding-left: 20px;
        }
        
        .sidebar-menu a.active::before {
            width: 4px;
            background: var(--neutral-0);
        }
        
        /* 内容区域 */
        .app-content {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
        }
        
        /* 页面标题 */
        .page-header {
            margin-bottom: 32px;
        }
        
        .page-title {
            font-size: 28px;
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 8px;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
        }
        
        .page-subtitle {
            color: var(--neutral-100);
            font-size: 16px;
            margin-top: 12px;
        }
        
        /* 卡片组件 */
        .card {
            background: var(--neutral-0);
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-8);
            box-shadow: var(--shadow-2);
            transition: all 0.15s ease;
            position: relative;
        }
        
        .card:hover {
            box-shadow: var(--shadow-4);
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
            opacity: 0;
            transition: opacity 0.15s ease;
        }
        
        .card:hover::before {
            opacity: 1;
        }
        
        .card-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--neutral-40);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-130);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .card-body {
            padding: 24px;
        }
        
        /* 表单组件 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--neutral-60);
            border-radius: var(--border-radius-4);
            font-family: inherit;
            font-size: 14px;
            background: var(--neutral-0);
            transition: all 0.15s ease;
            position: relative;
        }
        
        .form-input:hover {
            border-color: var(--neutral-100);
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
            transform: translateY(-1px);
        }
        
        .form-input::placeholder {
            color: var(--neutral-90);
        }
        
        /* 按钮组件 */
        .btn {
            padding: 10px 20px;
            border: 1px solid transparent;
            border-radius: var(--border-radius-4);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            justify-content: center;
        }
        
        .btn-primary {
            background: var(--primary-color);
            color: var(--neutral-0);
            border-color: var(--primary-color);
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn-primary:hover::before {
            left: 100%;
        }
        
        .btn-primary:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-8);
        }
        
        .btn-primary:active {
            background: var(--primary-pressed);
            border-color: var(--primary-pressed);
            transform: translateY(0);
            box-shadow: var(--shadow-2);
        }
        
        .btn-secondary {
            background: var(--neutral-0);
            color: var(--neutral-130);
            border-color: var(--neutral-60);
        }
        
        .btn-secondary:hover {
            background: var(--neutral-20);
            border-color: var(--neutral-70);
        }
        
        .btn-success {
            background: var(--success-color);
            color: var(--neutral-0);
            border-color: var(--success-color);
        }
        
        .btn-warning {
            background: var(--warning-color);
            color: var(--neutral-130);
            border-color: var(--warning-color);
        }
        
        .btn-danger {
            background: var(--error-color);
            color: var(--neutral-0);
            border-color: var(--error-color);
        }
        
        /* 网格布局 */
        .grid {
            display: grid;
            gap: 24px;
        }
        
        .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }
        
        /* 统计卡片 */
        .stat-card {
            padding: 24px;
            text-align: center;
            transition: all 0.15s ease;
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
            transform: translateY(100%);
            transition: transform 0.15s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-16);
        }
        
        .stat-card:hover::after {
            transform: translateY(0);
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-color);
            display: block;
        }
        
        .stat-label {
            color: var(--neutral-100);
            font-size: 14px;
            margin-top: 8px;
        }
        
        /* 列表组件 */
        .list-group {
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-6);
            overflow: hidden;
        }
        
        .list-item {
            padding: 16px 20px;
            border-bottom: 1px solid var(--neutral-40);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.15s ease;
            cursor: pointer;
        }
        
        .list-item:hover {
            background: var(--neutral-20);
        }
        
        .list-item:last-child {
            border-bottom: none;
        }
        
        .list-item-content {
            flex: 1;
        }
        
        .list-item-title {
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 4px;
        }
        
        .list-item-subtitle {
            color: var(--neutral-100);
            font-size: 12px;
        }
        
        /* 徽章组件 */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: var(--border-radius-2);
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-success {
            background: var(--success-color);
            color: var(--neutral-0);
        }
        
        .badge-warning {
            background: var(--warning-color);
            color: var(--neutral-130);
        }
        
        .badge-error {
            background: var(--error-color);
            color: var(--neutral-0);
        }
        
        .badge-info {
            background: var(--primary-color);
            color: var(--neutral-0);
        }
        
        /* 选择框组件 */
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border: 1px solid var(--neutral-60);
            border-radius: var(--border-radius-6);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .checkbox-item:hover {
            border-color: var(--primary-color);
            background: var(--neutral-10);
        }
        
        .checkbox-item input[type="checkbox"] {
            margin-right: 12px;
            transform: scale(1.1);
        }
        
        .checkbox-item.checked {
            border-color: var(--primary-color);
            background: rgba(0, 120, 212, 0.05);
        }
        
        /* 进度条 */
        .progress {
            width: 100%;
            height: 4px;
            background: var(--neutral-40);
            border-radius: var(--border-radius-2);
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }
        
        /* 弹出通知 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            max-width: 400px;
            padding: 16px 20px;
            border-radius: var(--border-radius-6);
            box-shadow: var(--shadow-16);
            z-index: 9999;
            animation: slideIn 0.3s ease;
        }
        
        .toast-success {
            background: var(--success-color);
            color: var(--neutral-0);
        }
        
        .toast-error {
            background: var(--error-color);
            color: var(--neutral-0);
        }
        
        .toast-warning {
            background: var(--warning-color);
            color: var(--neutral-130);
        }
        
        .toast-info {
            background: var(--primary-color);
            color: var(--neutral-0);
        }
        
        /* 模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: modalFadeIn 0.15s ease-out;
            backdrop-filter: blur(2px);
        }
        
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
            to {
                opacity: 1;
                backdrop-filter: blur(2px);
            }
        }
        
        @keyframes modalSlideIn {
            from {
                transform: translateY(-50px) scale(0.95);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }
        
        @keyframes modalFadeOut {
            from {
                opacity: 1;
                backdrop-filter: blur(2px);
            }
            to {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
        }
        
        @keyframes modalSlideOut {
            from {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            to {
                transform: translateY(-30px) scale(0.95);
                opacity: 0;
            }
        }
        
        .modal-content {
            background: var(--neutral-0);
            border-radius: var(--border-radius-8);
            box-shadow: var(--shadow-64);
            max-width: 90vw;
            max-height: 90vh;
            margin: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
            animation: modalSlideIn 0.2s ease-out;
        }
        
        .modal {
            background: var(--neutral-0);
            border-radius: var(--border-radius-8);
            box-shadow: var(--shadow-64);
            max-width: 90vw;
            max-height: 90vh;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        .modal-header {
            padding: 24px 60px 16px 24px;
            border-bottom: 1px solid var(--neutral-40);
            position: sticky;
            top: 0;
            background: var(--neutral-0);
            z-index: 10;
            border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--neutral-130);
            margin: 0;
        }
        
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--neutral-10);
            border: 2px solid var(--neutral-40);
            width: 40px;
            height: 40px;
            border-radius: var(--border-radius-4);
            cursor: pointer;
            color: var(--neutral-100);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 600;
            transition: all 0.15s ease;
            z-index: 11;
        }
        
        .modal-close:hover {
            background: var(--error-color);
            border-color: var(--error-color);
            color: var(--neutral-0);
            transform: scale(1.05);
            box-shadow: var(--shadow-8);
        }
        
        .modal-close:active {
            transform: scale(0.95);
        }
        
        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--neutral-40);
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            position: sticky;
            bottom: 0;
            background: var(--neutral-0);
            border-radius: 0 0 var(--border-radius-8) var(--border-radius-8);
        }
        
        .btn-close {
            background: var(--neutral-10);
            border: 2px solid var(--neutral-40);
            font-size: 18px;
            cursor: pointer;
            color: var(--neutral-100);
            border-radius: var(--border-radius-4);
            line-height: 1;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            font-weight: 600;
        }
        
        .btn-close:hover {
            background: var(--error-color);
            border-color: var(--error-color);
            color: var(--neutral-0);
            transform: scale(1.1);
            box-shadow: var(--shadow-8);
        }
        
        .btn-close:active {
            transform: scale(0.95);
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .info-grid > div {
            padding: 12px;
            background: var(--neutral-10);
            border-radius: var(--border-radius-6);
            border: 1px solid var(--neutral-40);
        }
        
        .table-container {
            overflow-x: auto;
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-6);
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--neutral-0);
        }
        
        .data-table th,
        .data-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--neutral-40);
        }
        
        .data-table th {
            background: var(--neutral-10);
            font-weight: 600;
            color: var(--neutral-130);
        }
        
        .data-table tbody tr:hover {
            background: var(--neutral-10);
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 48px 24px;
            color: var(--neutral-100);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--neutral-70);
        }
        
        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: var(--neutral-130);
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .grid-4 {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .grid-3 {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .app-sidebar {
                display: none;
            }
            
            .app-content {
                padding: 16px;
            }
            
            .grid-2,
            .grid-3,
            .grid-4 {
                grid-template-columns: 1fr;
            }
            
            .nav-menu {
                display: none;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .card-header {
                padding: 16px;
                flex-direction: column;
                gap: 12px;
                align-items: stretch;
            }
            
            .card-body {
                padding: 16px;
            }
            
            .filter-controls {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 16px !important;
            }
            
            .filter-controls .form-group {
                margin: 0 !important;
            }
            
            .filter-controls .form-input {
                width: 100% !important;
            }
        }
        
        @media (max-width: 480px) {
            .app-header {
                padding: 0 16px;
            }
            
            .app-title {
                font-size: 16px;
            }
            
            .stat-number {
                font-size: 24px;
            }
            
            .threat-card-header {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            
            .threat-card-title {
                flex-wrap: wrap;
                gap: 4px;
            }
            
            .threat-meta {
                align-items: flex-start;
            }
        }
        
        /* 动画 */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* 页面特定样式 */
        .dashboard-stats {
            margin-bottom: 32px;
        }
        
        .chart-container {
            height: 300px;
            position: relative;
        }
        
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px;
            color: var(--neutral-100);
        }
        
        .loading i {
            font-size: 24px;
            margin-right: 12px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 隐藏默认的页面内容 */
        .page-content {
            display: none;
        }
        
        .page-content.active {
            display: block;
        }
        
        /* 威胁分析页面样式 */
        .threat-level-chart {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .threat-level-item {
            border-radius: 1px;
            overflow: hidden;
            box-shadow: var(--shadow-2);
        }
        
        .threat-level {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 12px 16px;
            color: white;
            font-weight: 500;
            transition: transform 0.15s ease;
        }
        
        .threat-level:hover {
            transform: scale(1.02);
        }
        
        .threat-level.critical {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
        }
        
        .threat-level.high {
            background: linear-gradient(135deg, #ca5010, #a44109);
        }
        
        .threat-level.medium {
            background: linear-gradient(135deg, #da7b11, #b8650e);
        }
        
        .threat-level.low {
            background: linear-gradient(135deg, #16a085, #138a6b);
        }
        
        .level-label {
            font-size: 14px;
            font-weight: 500;
        }
        
        .level-count {
            font-size: 18px;
            font-weight: 700;
        }
        
        .enterprise-ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-radius: 1px;
            background: var(--neutral-10);
            border: 1px solid var(--neutral-40);
            margin-bottom: 12px;
            transition: all 0.15s ease;
        }
        
        .enterprise-ranking-item:hover {
            background: var(--neutral-20);
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow-4);
        }
        
        .ranking-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .enterprise-name {
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 4px;
            font-size: 15px;
        }
        
        .enterprise-stats {
            font-size: 12px;
            color: var(--neutral-100);
        }
        
        .threat-score {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 700;
            color: var(--error-color);
        }
        
        .threat-sessions-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 16px;
            background: var(--neutral-0);
            border-radius: var(--border-radius-8);
            overflow: hidden;
            box-shadow: var(--shadow-2);
        }
        
        .threat-sessions-table th,
        .threat-sessions-table td {
            text-align: left;
            padding: 14px 16px;
            border-bottom: 1px solid var(--neutral-40);
        }
        
        .threat-sessions-table th {
            background: var(--neutral-10);
            color: var(--neutral-130);
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .threat-sessions-table td {
            color: var(--neutral-110);
        }
        
        .threat-sessions-table tr:hover {
            background: var(--neutral-10);
        }
        
        .threat-sessions-table tr:last-child td {
            border-bottom: none;
        }
        
        .threat-level-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid transparent;
        }
        
        .threat-level-badge.critical {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626;
            border-color: #dc2626;
        }
        
        .threat-level-badge.high {
            background: rgba(202, 80, 16, 0.1);
            color: #ca5010;
            border-color: #ca5010;
        }
        
        .threat-level-badge.medium {
            background: rgba(218, 123, 17, 0.1);
            color: #da7b11;
            border-color: #da7b11;
        }
        
        .threat-level-badge.low {
            background: rgba(22, 160, 133, 0.1);
            color: #16a085;
            border-color: #16a085;
        }
        
        .threat-level-badge.critical {
            background: var(--status-error);
            color: white;
        }
        
        .threat-level-badge.high {
            background: #ca5010;
            color: white;
        }
        
        .threat-level-badge.medium {
            background: var(--status-warning);
            color: var(--neutral-900);
        }
        
        .threat-level-badge.low {
            background: var(--status-success);
            color: white;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 0px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .status-badge.completed {
            background: var(--status-success);
            color: white;
        }
        
        .status-badge.running {
            background: var(--accent-400);
            color: white;
        }
        
        .status-badge.error {
            background: var(--status-error);
            color: white;
        }
        
        /* 威胁详情模态框样式 */
        .modal-content.large {
            max-width: 1000px;
            max-height: 85vh;
            width: 95vw;
        }
        
        .modal-content.large .modal-body {
            max-height: calc(85vh - 160px);
            padding: 20px 24px;
        }
        
        .threat-details-list {
            display: grid;
            gap: 16px;
        }
        
        .threat-item {
            background: var(--neutral-800);
            border-radius: 1px;
            margin-bottom: 16px;
            padding: 16px;
            border-left: 4px solid var(--neutral-600);
        }
        
        .threat-item.has-threat {
            border-left-color: var(--status-error);
            background: rgba(220, 38, 38, 0.1);
        }
        
        .threat-item.no-threat {
            border-left-color: var(--status-success);
            background: rgba(34, 197, 94, 0.1);
        }
        
        .threat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .threat-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .threat-index {
            background: var(--accent-400);
            color: white;
            padding: 4px 8px;
            border-radius: 0px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .threat-score {
            font-size: 12px;
            color: var(--neutral-400);
        }
        
        .threat-provider {
            font-size: 12px;
            color: var(--neutral-400);
        }
        
        .threat-content {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .threat-content > div {
            margin-bottom: 8px;
        }
        
        .threat-content strong {
            color: var(--neutral-200);
        }
        
        .question-text {
            color: var(--neutral-300);
        }
        
        .ai-response {
            color: var(--neutral-400);
        }
        
        .threat-description {
            color: var(--status-error);
        }
        
        .threat-level-summary {
            margin-top: 16px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--accent-400);
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--neutral-400);
            margin-top: 4px;
        }
        
        /* 威胁详情卡片样式 */
        .threat-detail-card {
            background: var(--neutral-0);
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-8);
            padding: 20px;
            margin-bottom: 16px;
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: var(--shadow-2);
        }
        
        .threat-detail-card:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-8);
            transform: translateY(-2px);
        }
        
        .threat-detail-card.has-threat {
            border-left: 4px solid var(--error-color);
        }
        
        .threat-detail-card.no-threat {
            border-left: 4px solid var(--success-color);
        }
        
        .threat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        
        .threat-card-title {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .threat-index {
            background: var(--accent-color);
            color: var(--neutral-0);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 600;
        }
        
        .threat-score, .threat-confidence {
            background: var(--neutral-20);
            color: var(--neutral-110);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
        }
        
        .threat-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            font-size: 12px;
            color: var(--neutral-100);
        }
        
        .threat-card-content {
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        .threat-question, .threat-response, .threat-description {
            margin-bottom: 12px;
            line-height: 1.6;
        }
        
        .threat-question {
            font-size: 14px;
        }
        
        .threat-response {
            font-size: 13px;
            color: var(--neutral-100);
        }
        
        .threat-description {
            font-size: 13px;
            background: rgba(209, 52, 56, 0.1);
            padding: 8px 12px;
            border-radius: var(--border-radius-4);
            border-left: 3px solid var(--error-color);
        }
        
        .threat-question strong {
            color: var(--primary-color);
        }
        
        .threat-response strong {
            color: var(--neutral-110);
        }
        
        .threat-description strong {
            color: var(--error-color);
        }
        
        .threat-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid var(--neutral-30);
        }
        
        .threat-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .threat-status.detected {
            color: var(--error-color);
        }
        
        .threat-status.safe {
            color: var(--success-color);
        }
        
        /* 威胁详情模态框样式 */
        .threat-detail-full {
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .threat-overview {
            background: var(--neutral-10);
            padding: 16px;
            border-radius: var(--border-radius-6);
            margin-bottom: 20px;
        }
        
        .threat-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        
        .threat-score-badge, .confidence-badge {
            background: var(--info-color);
            color: var(--neutral-0);
            padding: 6px 12px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-badge.detected {
            background: var(--error-color);
            color: var(--neutral-0);
        }
        
        .status-badge.safe {
            background: var(--success-color);
            color: var(--neutral-0);
        }
        
        .threat-meta-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            font-size: 14px;
        }
        
        .threat-content-full {
            space: 20px 0;
        }
        
        .content-section {
            margin-bottom: 24px;
            padding: 16px;
            background: var(--neutral-10);
            border-radius: var(--border-radius-6);
            border-left: 4px solid var(--primary-color);
        }
        
        .content-section h4 {
            color: var(--neutral-130);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .ai-response-full {
            background: var(--neutral-0);
            padding: 12px;
            border-radius: var(--border-radius-4);
            border: 1px solid var(--neutral-40);
            white-space: pre-wrap;
            font-family: inherit;
            line-height: 1.6;
        }
        
        .threat-types {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .threat-type-tag {
            background: var(--warning-color);
            color: var(--neutral-130);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 500;
        }
        
        .recommended-actions {
            list-style: none;
            padding: 0;
        }
        
        .recommended-actions li {
            background: var(--neutral-0);
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: var(--border-radius-4);
            border-left: 3px solid var(--success-color);
        }
        
        .analysis-details {
            background: var(--neutral-130);
            color: var(--neutral-0);
            padding: 12px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        /* 筛选器样式 */
        .filter-controls {
            margin-bottom: 24px;
            display: flex;
            gap: 16px;
            align-items: flex-end;
            flex-wrap: wrap;
            padding: 20px;
            background: var(--neutral-10);
            border-radius: var(--border-radius-8);
            border: 1px solid var(--neutral-40);
        }
        
        .filter-item {
            margin: 0;
            min-width: 160px;
            flex: 1;
        }
        
        .filter-item .form-label {
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--neutral-110);
        }
        
        .filter-item .form-input {
            font-size: 13px;
            padding: 10px 12px;
        }
        
        /* 会话详情样式 */
        .session-overview {
            background: var(--neutral-10);
            padding: 20px;
            border-radius: var(--border-radius-8);
            margin-bottom: 20px;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .info-item label {
            font-weight: 600;
            color: var(--neutral-110);
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .info-item span {
            font-size: 15px;
            color: var(--neutral-130);
        }
        
        .question-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .question-number {
            background: var(--primary-color);
            color: var(--neutral-0);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
        }
        
        .question-type-badge {
            background: var(--info-color);
            color: var(--neutral-0);
            padding: 4px 12px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .inspirational-badge {
            background: var(--warning-color);
            color: var(--neutral-130);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
            font-size: 11px;
            font-weight: 600;
        }
        
        .question-text h4,
        .responses-section h4 {
            color: var(--neutral-130);
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .question-text p {
            background: var(--neutral-10);
            padding: 12px;
            border-radius: var(--border-radius-4);
            border-left: 3px solid var(--primary-color);
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        .response-item {
            margin-bottom: 12px;
            border-radius: var(--border-radius-6);
            overflow: hidden;
        }
        
        .response-item.success {
            border: 1px solid var(--success-color);
        }
        
        .response-item.error {
            border: 1px solid var(--error-color);
        }
        
        .response-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--neutral-10);
        }
        
        .response-item.success .response-header {
            background: rgba(34, 197, 94, 0.1);
        }
        
        .response-item.error .response-header {
            background: rgba(239, 68, 68, 0.1);
        }
        
        .provider-name {
            color: var(--neutral-130);
            font-size: 14px;
        }
        
        .response-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
        }
        
        .response-status.success {
            color: var(--success-color);
        }
        
        .response-status.error {
            color: var(--error-color);
        }
        
        .response-time {
            color: var(--neutral-100);
            background: var(--neutral-20);
            padding: 2px 6px;
            border-radius: var(--border-radius-4);
        }
        
        .response-content {
            padding: 16px;
            background: var(--neutral-0);
        }
        
        .response-content p {
            line-height: 1.6;
            margin: 0;
        }
        
        .error-message {
            color: var(--error-color);
            font-style: italic;
        }
        
        .no-responses {
            text-align: center;
            color: var(--neutral-100);
            font-style: italic;
            padding: 20px;
            background: var(--neutral-10);
            border-radius: var(--border-radius-4);
        }
        
        /* 会话列表项样式 */
        .session-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: var(--neutral-0);
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-8);
            margin-bottom: 12px;
            transition: all 0.15s ease;
        }
        
        .session-list-item:hover {
            background: var(--neutral-10);
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow-4);
        }
        
        .session-main-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            min-width: 0;
        }
        
        .session-actions {
            display: flex;
            gap: 8px;
            margin-left: 16px;
            flex-shrink: 0;
        }
        
        .session-status {
            margin-left: 16px;
            flex-shrink: 0;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn-sm i {
            font-size: 12px;
        }
        
        .list-item-content {
            flex: 1;
            min-width: 0;
        }
        
        .list-item-title {
            font-weight: 600;
            color: var(--neutral-130);
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .list-item-subtitle {
            color: var(--neutral-100);
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 项目详情样式 */
        .project-overview {
            background: var(--neutral-10);
            padding: 20px;
            border-radius: var(--border-radius-8);
            margin-bottom: 24px;
        }
        
        .project-section {
            margin-bottom: 32px;
        }
        
        .project-section h3 {
            color: var(--neutral-130);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sessions-grid,
        .threat-sessions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 16px;
        }
        
        .session-card,
        .threat-session-card {
            background: var(--neutral-0);
            border: 1px solid var(--neutral-40);
            border-radius: var(--border-radius-8);
            overflow: hidden;
            transition: all 0.15s ease;
        }
        
        .session-card:hover,
        .threat-session-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-4);
        }
        
        .session-card-header,
        .threat-card-header {
            background: var(--neutral-10);
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .session-id,
        .threat-id {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: var(--neutral-110);
            background: var(--neutral-20);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
        }
        
        .threat-count {
            background: var(--error-color);
            color: var(--neutral-0);
            padding: 4px 8px;
            border-radius: var(--border-radius-4);
            font-size: 12px;
            font-weight: 600;
        }
        
        .session-card-body,
        .threat-card-body {
            padding: 16px;
        }
        
        .session-info,
        .threat-info {
            margin-bottom: 16px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .info-row .label {
            color: var(--neutral-100);
            font-size: 13px;
        }
        
        .info-row .value {
            color: var(--neutral-130);
            font-size: 13px;
            font-weight: 500;
        }
        
        .session-actions,
        .threat-actions {
            display: flex;
            gap: 8px;
        }
        
        @media (max-width: 768px) {
            .sessions-grid,
            .threat-sessions-grid {
                grid-template-columns: 1fr;
            }
            
            .session-actions,
            .threat-actions {
                flex-direction: column;
            }
            
            .session-card-header,
            .threat-card-header {
                flex-direction: column;
                gap: 8px;
                align-items: stretch;
            }
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="app-header">
            <div class="app-title">
                <i class="fas fa-chart-line"></i>
                企业舆情分析系统
            </div>
            <nav class="nav-menu">
                <a href="#" class="nav-item" onclick="showPage('dashboard')">
                    <i class="fas fa-home"></i>
                    概览
                </a>
                <a href="#" onclick="showPage('bigscreen')" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    数据大屏
                </a>
                <button class="btn btn-secondary" onclick="testConnection()">
                    <i class="fas fa-wifi"></i>
                    连接状态
                </button>
            </nav>
        </header>

        <div class="app-main">
            <!-- 侧边栏 -->
            <aside class="app-sidebar">
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i class="fas fa-tasks"></i>
                        分析功能
                    </h3>
                    <ul class="sidebar-menu">
                        <li><a href="#" onclick="showPage('analysis')" class="active">
                            <i class="fas fa-search"></i>
                            新建分析
                        </a></li>
                        <li><a href="#" onclick="showPage('sessions')">
                            <i class="fas fa-history"></i>
                            分析历史
                        </a></li>
                        <li><a href="#" onclick="showPage('reports')">
                            <i class="fas fa-file-alt"></i>
                            历史报告
                        </a></li>
                        <li><a href="#" onclick="showPage('threat-analysis')">
                            <i class="fas fa-shield-alt"></i>
                            威胁分析
                        </a></li>
                        <li><a href="#" onclick="showPage('projects')">
                            <i class="fas fa-folder"></i>
                            项目管理
                        </a></li>
                    </ul>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i class="fas fa-shield-alt"></i>
                        威胁监控
                    </h3>
                    <ul class="sidebar-menu">
                        <li><a href="#" onclick="showPage('threats')">
                            <i class="fas fa-exclamation-triangle"></i>
                            威胁分析
                        </a></li>
                        <li><a href="#" onclick="showPage('alerts')">
                            <i class="fas fa-search-plus"></i>
                            威胁详情
                        </a></li>
                    </ul>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i class="fas fa-cog"></i>
                        系统管理
                    </h3>
                    <ul class="sidebar-menu">
                        <li><a href="#" onclick="showPage('config')">
                            <i class="fas fa-key"></i>
                            API配置
                        </a></li>
                        <li><a href="#" onclick="showPage('settings')">
                            <i class="fas fa-sliders-h"></i>
                            系统设置
                        </a></li>
                    </ul>
                </div>
            </aside>

            <!-- 主内容区 -->
            <main class="app-content">
                <!-- 概览页面 -->
                <div id="dashboard" class="page-content active">
                    <div class="page-header">
                        <h1 class="page-title">系统概览</h1>
                        <p class="page-subtitle">企业舆情分析系统运行状态和关键指标</p>
                    </div>
                    
                    <div class="dashboard-stats grid grid-4">
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="total-enterprises">0</span>
                                <div class="stat-label">分析企业总数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="total-sessions">0</span>
                                <div class="stat-label">分析会话总数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="threat-sessions">0</span>
                                <div class="stat-label">威胁分析总数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="system-health">100%</span>
                                <div class="stat-label">系统健康度</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-2">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">
                                    <i class="fas fa-chart-area"></i>
                                    分析趋势
                                </h2>
                            </div>
                            <div class="card-body">
                                <div class="chart-container" id="trend-chart"></div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    威胁分布
                                </h2>
                            </div>
                            <div class="card-body">
                                <div class="chart-container" id="threat-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新建分析页面 -->
                <div id="analysis" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">企业舆情分析</h1>
                        <p class="page-subtitle">输入企业信息，开始智能分析</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-building"></i>
                                分析配置
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-label">企业名称</label>
                                <input type="text" id="enterprise-name" class="form-input" 
                                       placeholder="请输入要分析的企业名称，如：腾讯、阿里巴巴等">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">分析类型</label>
                                <div class="checkbox-group">
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="negative_news" value="negative_news" checked>
                                        <label for="negative_news">负面新闻</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="positive_news" value="positive_news" checked>
                                        <label for="positive_news">正面新闻</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="financial_info" value="financial_info" checked>
                                        <label for="financial_info">财务信息</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="market_analysis" value="market_analysis" checked>
                                        <label for="market_analysis">市场分析</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="product_info" value="product_info">
                                        <label for="product_info">产品信息</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="leadership" value="leadership">
                                        <label for="leadership">领导层信息</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="competitive_analysis" value="competitive_analysis" checked>
                                        <label for="competitive_analysis">竞争分析</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="technology" value="technology">
                                        <label for="technology">技术能力</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="reputation" value="reputation">
                                        <label for="reputation">品牌声誉</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="investment" value="investment">
                                        <label for="investment">投资相关</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="regulation" value="regulation" checked>
                                        <label for="regulation">监管合规</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="esg" value="esg">
                                        <label for="esg">ESG相关</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="use-inspiration" checked>
                                    <label for="use-inspiration">启发式针对问题生成</label>
                                </div>
                            </div>
                            
                            <div style="display: flex; gap: 12px; margin-top: 24px;">
                                <button class="btn btn-primary" onclick="startAnalysis()">
                                    <i class="fas fa-play"></i>
                                    开始分析
                                </button>
                                <button class="btn btn-secondary" onclick="clearForm()">
                                    <i class="fas fa-undo"></i>
                                    重置
                                </button>
                            </div>
                            
                            <div id="analysis-progress" style="display: none; margin-top: 20px;">
                                <div class="loading">
                                    <i class="fas fa-spinner"></i>
                                    正在进行企业分析，请稍候...
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            
                            <div id="analysis-result" style="margin-top: 20px;"></div>
                        </div>
                    </div>
                </div>

                <!-- 分析历史页面 -->
                <div id="sessions" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">分析历史</h1>
                        <p class="page-subtitle">查看所有历史分析会话</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-history"></i>
                                历史记录
                            </h2>
                            <button class="btn btn-secondary" onclick="loadSessions()">
                                <i class="fas fa-sync"></i>
                                刷新
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="sessions-loading" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </div>
                            <div id="sessions-list"></div>
                        </div>
                    </div>
                </div>

                <!-- 历史报告页面 -->
                <div id="reports" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">历史报告</h1>
                        <p class="page-subtitle">查看和管理生成的分析报告</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-file-alt"></i>
                                报告列表
                            </h2>
                            <div style="display: flex; gap: 8px;">
                                <button class="btn btn-secondary" onclick="loadReports()">
                                    <i class="fas fa-sync"></i>
                                    刷新
                                </button>
                                <button class="btn btn-primary" onclick="exportAllReports()">
                                    <i class="fas fa-download"></i>
                                    批量导出
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="reports-loading" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </div>
                            <div id="reports-list"></div>
                        </div>
                    </div>
                </div>

                <!-- 威胁分析页面 -->
                <div id="threat-analysis" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">威胁分析</h1>
                        <p class="page-subtitle">对企业分析结果进行威胁检测和风险评估</p>
                    </div>
                    
                    <!-- 手动分析工具 -->
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-play"></i>
                                手动威胁分析
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-label">选择分析会话</label>
                                <select id="session-select" class="form-input">
                                    <option value="">请选择一个分析会话</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">或者直接输入会话ID</label>
                                <input type="text" id="manual-session-id" class="form-input" 
                                       placeholder="输入会话ID，如：db7a6363-d674-4cde-b3e2-62c76ff668c1">
                            </div>
                            <div style="display: flex; gap: 12px; margin-top: 20px;">
                                <button class="btn btn-primary" onclick="startManualThreatAnalysis()">
                                    <i class="fas fa-shield-alt"></i>
                                    开始威胁分析
                                </button>
                                <button class="btn btn-secondary" onclick="loadAvailableSessions()">
                                    <i class="fas fa-refresh"></i>
                                    刷新会话列表
                                </button>
                            </div>
                            <div id="threat-analysis-progress" style="display: none; margin-top: 20px;">
                                <div class="loading">
                                    <i class="fas fa-spinner"></i>
                                    正在进行威胁分析，请稍候...
                                </div>
                            </div>
                            <div id="threat-analysis-result" style="margin-top: 20px;"></div>
                        </div>
                    </div>
                    
                    <!-- 威胁分析历史 -->
                    <div class="card" style="margin-top: 24px;">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-history"></i>
                                威胁分析历史
                            </h2>
                        </div>
                        <div class="card-body">
                            <div id="threat-sessions-loading" class="loading" style="display: none;">
                                <i class="fas fa-spinner"></i>
                                加载威胁分析历史...
                            </div>
                            <div id="threat-sessions-list">
                                <!-- 威胁分析会话将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 威胁监控页面 -->
                <div id="threats" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">威胁监控</h1>
                        <p class="page-subtitle">企业风险威胁评估与监控</p>
                    </div>
                    
                    <!-- 威胁统计概览 -->
                    <div class="dashboard-stats grid grid-4">
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="threat-total-sessions">0</span>
                                <div class="stat-label">威胁分析总数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="threat-total-enterprises">0</span>
                                <div class="stat-label">涉及企业数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="threat-total-threats">0</span>
                                <div class="stat-label">检测威胁总数</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="stat-card">
                                <span class="stat-number" id="threat-avg-score">0.0</span>
                                <div class="stat-label">平均威胁评分</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-2">
                        <!-- 威胁等级分布 -->
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">
                                    <i class="fas fa-chart-pie"></i>
                                    威胁等级分布
                                </h2>
                            </div>
                            <div class="card-body">
                                <div id="threat-level-chart">
                                    <div class="threat-level-item">
                                        <div class="threat-level critical">
                                            <span class="level-label">严重</span>
                                            <span class="level-count" id="critical-count">0</span>
                                        </div>
                                    </div>
                                    <div class="threat-level-item">
                                        <div class="threat-level high">
                                            <span class="level-label">高危</span>
                                            <span class="level-count" id="high-count">0</span>
                                        </div>
                                    </div>
                                    <div class="threat-level-item">
                                        <div class="threat-level medium">
                                            <span class="level-label">中危</span>
                                            <span class="level-count" id="medium-count">0</span>
                                        </div>
                                    </div>
                                    <div class="threat-level-item">
                                        <div class="threat-level low">
                                            <span class="level-label">低危</span>
                                            <span class="level-count" id="low-count">0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 企业风险排名 -->
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">
                                    <i class="fas fa-ranking-star"></i>
                                    企业风险排名
                                </h2>
                            </div>
                            <div class="card-body">
                                <div id="enterprise-rankings"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 威胁分析会话列表 -->
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-list-alt"></i>
                                威胁分析会话
                            </h2>
                            <button class="btn btn-secondary" onclick="loadThreatSessionsForThreats()">
                                <i class="fas fa-sync"></i>
                                刷新
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="threats-sessions-loading" class="loading" style="display: none;">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </div>
                            <div id="threats-sessions-list"></div>
                        </div>
                    </div>
                </div>

                <!-- 威胁详情管理页面 -->
                <div id="alerts" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">威胁详情管理</h1>
                        <p class="page-subtitle">详细查看和管理威胁分析结果</p>
                    </div>
                    
                    <!-- 威胁分析会话选择 -->
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-filter"></i>
                                威胁会话筛选
                            </h2>
                            <button class="btn btn-secondary" onclick="loadThreatSessionsForDetails()">
                                <i class="fas fa-sync"></i>
                                刷新
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-label">选择威胁分析会话</label>
                                <select id="threat-session-selector" class="form-input" onchange="loadThreatDetailsForSession()">
                                    <option value="">请选择威胁分析会话...</option>
                                </select>
                            </div>
                            <div id="selected-session-info" style="display: none; margin-top: 16px;">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    <div id="session-info-text"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 威胁详情列表 -->
                    <div id="threat-details-container" style="display: none;">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">
                                    <i class="fas fa-shield-alt"></i>
                                    威胁详情列表
                                </h2>
                                <div style="display: flex; gap: 8px; align-items: center;">
                                    <span class="badge" id="threat-count-badge">0 项威胁</span>
                                    <button class="btn btn-primary btn-sm" onclick="exportThreatDetails()">
                                        <i class="fas fa-download"></i>
                                        导出详情
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- 筛选器 -->
                                <div class="filter-controls">
                                    <div class="form-group filter-item">
                                        <label class="form-label">威胁等级</label>
                                        <select id="level-filter" class="form-input" onchange="filterThreatDetails()">
                                            <option value="">全部等级</option>
                                            <option value="critical">严重</option>
                                            <option value="high">高危</option>
                                            <option value="medium">中危</option>
                                            <option value="low">低危</option>
                                        </select>
                                    </div>
                                    <div class="form-group filter-item">
                                        <label class="form-label">威胁检测</label>
                                        <select id="detection-filter" class="form-input" onchange="filterThreatDetails()">
                                            <option value="">全部状态</option>
                                            <option value="true">已检测威胁</option>
                                            <option value="false">未检测威胁</option>
                                        </select>
                                    </div>
                                    <div class="form-group filter-item">
                                        <label class="form-label">评分范围</label>
                                        <select id="score-filter" class="form-input" onchange="filterThreatDetails()">
                                            <option value="">全部评分</option>
                                            <option value="8-10">高分 (8-10)</option>
                                            <option value="6-8">中分 (6-8)</option>
                                            <option value="0-6">低分 (0-6)</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- 威胁详情卡片列表 -->
                                <div id="threat-details-list">
                                    <div class="empty-state">
                                        <i class="fas fa-shield-alt"></i>
                                        <h3>请选择威胁分析会话</h3>
                                        <p>选择上方的威胁分析会话以查看详细信息</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统设置页面 -->
                <div id="settings" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">系统设置</h1>
                        <p class="page-subtitle">系统参数和偏好设置</p>
                    </div>
                    <div class="empty-state">
                        <i class="fas fa-sliders-h"></i>
                        <h3>系统设置功能</h3>
                        <p>该功能正在开发中...</p>
                    </div>
                </div>

                <!-- 项目管理页面 -->
                <div id="projects" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">项目管理</h1>
                        <p class="page-subtitle">按项目分组管理分析数据</p>
                    </div>
                    
                    <div class="grid grid-3" id="projects-grid">
                        <!-- 项目卡片将在这里动态生成 -->
                    </div>
                    
                    <div class="card" style="margin-top: 24px;">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-plus"></i>
                                创建新项目
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-label">项目名称</label>
                                <input type="text" id="project-name" class="form-input" 
                                       placeholder="输入项目名称">
                            </div>
                            <div class="form-group">
                                <label class="form-label">项目描述</label>
                                <input type="text" id="project-description" class="form-input" 
                                       placeholder="项目描述（可选）">
                            </div>
                            <button class="btn btn-primary" onclick="createProject()">
                                <i class="fas fa-plus"></i>
                                创建项目
                            </button>
                        </div>
                    </div>
                </div>

                <!-- API配置页面 -->
                <div id="config" class="page-content">
                    <div class="page-header">
                        <h1 class="page-title">API配置</h1>
                        <p class="page-subtitle">管理AI服务提供商API密钥</p>
                    </div>
                    
                    <div id="providers-container">
                        <!-- 提供商配置将在这里动态生成 -->
                    </div>
                    
                    <div class="card" style="margin-top: 24px;">
                        <div class="card-header">
                            <h2 class="card-title">
                                <i class="fas fa-tools"></i>
                                系统工具
                            </h2>
                        </div>
                        <div class="card-body">
                            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                                <button class="btn btn-warning" onclick="initializeSystem()">
                                    <i class="fas fa-database"></i>
                                    初始化数据库
                                </button>
                                <button class="btn btn-info" onclick="reinitializeSystem()">
                                    <i class="fas fa-sync"></i>
                                    重新初始化系统
                                </button>
                                <button class="btn btn-success" onclick="checkSystemStatus()">
                                    <i class="fas fa-heartbeat"></i>
                                    检查系统状态
                                </button>
                                <button class="btn btn-primary" onclick="testConnection()">
                                    <i class="fas fa-wifi"></i>
                                    测试连接
                                </button>
                                <button class="btn btn-secondary" onclick="exportConfig()">
                                    <i class="fas fa-download"></i>
                                    导出配置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/app.js"></script>
</body>
</html> 